<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="对账文件名称" prop="fileName">
        <el-input
          v-model="queryParams.fileName"
          placeholder="请输入对账文件名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="交易日期" prop="transDate">
        <el-input
          v-model="queryParams.transDate"
          placeholder="请输入交易日期"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="交易时间" prop="transTime">
        <el-input
          v-model="queryParams.transTime"
          placeholder="请输入交易时间"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="对方账号" prop="crAccNo">
        <el-input
          v-model="queryParams.crAccNo"
          placeholder="请输入对方账号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="交易金额" prop="transAmt">
        <el-input
          v-model="queryParams.transAmt"
          placeholder="请输入交易金额"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="传票号" prop="summonsNo">
        <el-input
          v-model="queryParams.summonsNo"
          placeholder="请输入传票号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="摘要" prop="abstract">
        <el-input
          v-model="queryParams.abstract"
          placeholder="请输入摘要"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="附言" prop="postScript">
        <el-input
          v-model="queryParams.postScript"
          placeholder="请输入附言"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>



      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['fund:reconciliation:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['fund:reconciliation:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['fund:reconciliation:remove']"
        >删除
        </el-button>
      </el-col-->
      <el-col :span="1.5">
        <el-upload
          class="upload-demo"
          :action="excelUploadUrl"
          :headers="myHeaders"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleImageBatchUpload"
          :multiple="false">
          <el-tooltip placement="top">
            <div slot="content">
              1、上传文件必须按照模板形式上传<br/>
              2、上传文件只能是 xls、xlsx格式<br/>
              3、上传文件大小不能超过5M<br/>
            </div>
            <el-button
              type="success"
              icon="el-icon-upload"
              size="mini"
              v-hasPermi="['fund:reconciliation:upload']"
            >文件上传
            </el-button>
          </el-tooltip>

        </el-upload>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['fund:reconciliation:export']"
        >导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="reconciliationList" @selection-change="handleSelectionChange">
      <!--el-table-column type="selection" width="55" align="center"/-->
      <!--el-table-column label="备注" align="center" prop="id"/-->
      <el-table-column label="对账文件名称" align="center" prop="fileName" width="150"/>
      <!--el-table-column label="省市代码" align="center" prop="prov"/-->
      <el-table-column label="账号" align="center" prop="accNo" width="150"/>
      <el-table-column label="货币码" align="center" prop="cur" width="100"/>
      <el-table-column label="交易日期" align="center" prop="transDate" width="90"/>
      <el-table-column label="交易时间" align="center" prop="transTime" width="200"/>
      <!--l-table-column label="日志号" align="center" prop="logId" width="100" /-->
      <el-table-column label="交易类型" align="center" prop="transType"/>
      <el-table-column label="交易行号" align="center" prop="bankNo"/>
      <el-table-column label="户名" align="center" prop="accName" width="200"/>
      <!--el-table-column label="发生额标志" align="center" prop="flag"/-->
      <!--el-table-column label="对方账号省市代码" align="center" prop="crProv"/-->
      <el-table-column label="对方账号" align="center" prop="crAccNo" width="180"/>
      <el-table-column label="对方账号货币码" align="center" prop="crCur" width="100"/>
      <el-table-column label="对方账号户名" align="center" prop="crAccName" width="280"/>
      <el-table-column label="对方账号开户行" align="center" prop="crBankName" width="280"/>
      <!--el-table-column label="现转标志" align="center" prop="transFlag"/>
      <el-table-column label="错账日期" align="center" prop="errorDate"/>
      <el-table-column label="错账传票号" align="center" prop="errorSummonsNo"/-->
      <el-table-column label="交易金额" align="center" prop="transAmt"/>
      <el-table-column label="账户余额" align="center" prop="balance"/>
      <el-table-column label="上笔余额" align="center" prop="preBalance"/>
      <!--el-table-column label="手续费总额" align="center" prop="feeTotal"/>
      <el-table-column label="凭证种类" align="center" prop="voucherType"/>
      <el-table-column label="凭证省市代号" align="center" prop="voucherProv"/>
      <el-table-column label="凭证批次号" align="center" prop="voucherBatchId"/-->
      <!--el-table-column label="凭证号" align="center" prop="voucherNo"/>
      <el-table-column label="客户参考号" align="center" prop="cusRefNum"/-->
      <el-table-column label="交易码" align="center" prop="transId"/>
      <el-table-column label="柜员号" align="center" prop="tellerNo"/>
      <el-table-column label="传票号" align="center" prop="summonsNo"/>
      <el-table-column label="摘要" align="center" prop="abstract"/>
      <el-table-column label="附言" align="center" prop="postScript"/>
      <el-table-column label="交易来源" align="center" prop="transOrg"/>
      <！--el-table-column label="备注" align="center" prop="remarks"/-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['fund:reconciliation:edit']"
          >修改
          </el-button>
          <!--el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['fund:reconciliation:remove']"
          >删除
          </el-button-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对账文件导入对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="对账文件名称" prop="fileName">
          <el-input v-model="form.fileName" placeholder="请输入对账文件名称"/>
        </el-form-item>
        <el-form-item label="省市代码" prop="prov">
          <el-input v-model="form.prov" placeholder="请输入省市代码"/>
        </el-form-item>
        <el-form-item label="账号" prop="accNo">
          <el-input v-model="form.accNo" placeholder="请输入账号"/>
        </el-form-item>
        <el-form-item label="货币码" prop="cur">
          <el-input v-model="form.cur" placeholder="请输入货币码"/>
        </el-form-item>
        <el-form-item label="交易日期" prop="transDate">
          <el-input v-model="form.transDate" placeholder="请输入交易日期"/>
        </el-form-item>
        <el-form-item label="交易时间" prop="transTime">
          <el-input v-model="form.transTime" placeholder="请输入交易时间"/>
        </el-form-item>
        <el-form-item label="日志号" prop="logId">
          <el-input v-model="form.logId" placeholder="请输入日志号"/>
        </el-form-item>
        <el-form-item label="交易类型">
          <el-select v-model="form.transType" placeholder="请选择交易类型">
            <el-option label="请选择字典生成" value=""/>
          </el-select>
        </el-form-item>
        <el-form-item label="交易行号" prop="bankNo">
          <el-input v-model="form.bankNo" placeholder="请输入交易行号"/>
        </el-form-item>
        <el-form-item label="户名" prop="accName">
          <el-input v-model="form.accName" placeholder="请输入户名"/>
        </el-form-item>
        <el-form-item label="发生额标志" prop="flag">
          <el-input v-model="form.flag" placeholder="请输入发生额标志"/>
        </el-form-item>
        <el-form-item label="对方账号省市代码" prop="crProv">
          <el-input v-model="form.crProv" placeholder="请输入对方账号省市代码"/>
        </el-form-item>
        <el-form-item label="对方账号" prop="crAccNo">
          <el-input v-model="form.crAccNo" placeholder="请输入对方账号"/>
        </el-form-item>
        <el-form-item label="对方账号货币码" prop="crCur">
          <el-input v-model="form.crCur" placeholder="请输入对方账号货币码"/>
        </el-form-item>
        <el-form-item label="对方账号户名" prop="crAccName">
          <el-input v-model="form.crAccName" placeholder="请输入对方账号户名"/>
        </el-form-item>
        <el-form-item label="对方账号开户行" prop="crBankName">
          <el-input v-model="form.crBankName" placeholder="请输入对方账号开户行"/>
        </el-form-item>
        <el-form-item label="现转标志" prop="transFlag">
          <el-input v-model="form.transFlag" placeholder="请输入现转标志"/>
        </el-form-item>
        <el-form-item label="错账日期" prop="errorDate">
          <el-input v-model="form.errorDate" placeholder="请输入错账日期"/>
        </el-form-item>
        <el-form-item label="错账传票号" prop="errorSummonsNo">
          <el-input v-model="form.errorSummonsNo" placeholder="请输入错账传票号"/>
        </el-form-item>
        <el-form-item label="交易金额" prop="transAmt">
          <el-input v-model="form.transAmt" placeholder="请输入交易金额"/>
        </el-form-item>
        <el-form-item label="账户余额" prop="balance">
          <el-input v-model="form.balance" placeholder="请输入账户余额"/>
        </el-form-item>
        <el-form-item label="上笔余额" prop="preBalance">
          <el-input v-model="form.preBalance" placeholder="请输入上笔余额"/>
        </el-form-item>
        <el-form-item label="手续费总额" prop="feeTotal">
          <el-input v-model="form.feeTotal" placeholder="请输入手续费总额"/>
        </el-form-item>
        <el-form-item label="凭证种类">
          <el-select v-model="form.voucherType" placeholder="请选择凭证种类">
            <el-option label="请选择字典生成" value=""/>
          </el-select>
        </el-form-item>
        <el-form-item label="凭证省市代号" prop="voucherProv">
          <el-input v-model="form.voucherProv" placeholder="请输入凭证省市代号"/>
        </el-form-item>
        <el-form-item label="凭证批次号" prop="voucherBatchId">
          <el-input v-model="form.voucherBatchId" placeholder="请输入凭证批次号"/>
        </el-form-item>
        <el-form-item label="凭证号" prop="voucherNo">
          <el-input v-model="form.voucherNo" placeholder="请输入凭证号"/>
        </el-form-item>
        <el-form-item label="客户参考号" prop="cusRefNum">
          <el-input v-model="form.cusRefNum" placeholder="请输入客户参考号"/>
        </el-form-item>
        <el-form-item label="交易码" prop="transId">
          <el-input v-model="form.transId" placeholder="请输入交易码"/>
        </el-form-item>
        <el-form-item label="柜员号" prop="tellerNo">
          <el-input v-model="form.tellerNo" placeholder="请输入柜员号"/>
        </el-form-item>
        <el-form-item label="传票号" prop="summonsNo">
          <el-input v-model="form.summonsNo" placeholder="请输入传票号"/>
        </el-form-item>
        <el-form-item label="摘要" prop="abstract">
          <el-input v-model="form.abstract" placeholder="请输入摘要"/>
        </el-form-item>
        <el-form-item label="附言" prop="postScript">
          <el-input v-model="form.postScript" placeholder="请输入附言"/>
        </el-form-item>
        <el-form-item label="交易来源" prop="transOrg">
          <el-input v-model="form.transOrg" placeholder="请输入交易来源"/>
        </el-form-item>
        <el-form-item label="租户代码" prop="corpCode">
          <el-input v-model="form.corpCode" placeholder="请输入租户代码"/>
        </el-form-item>
        <el-form-item label="租户名称" prop="corpName">
          <el-input v-model="form.corpName" placeholder="请输入租户名称"/>
        </el-form-item>
        <el-form-item label="请求IP" prop="reqIp">
          <el-input v-model="form.reqIp" placeholder="请输入请求IP"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listReconciliation,
    getReconciliation,
    delReconciliation,
    addReconciliation,
    updateReconciliation,
    exportReconciliation
  } from "@/api/fund/reconciliation";
  import {getToken} from '@/utils/auth';

  export default {
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 对账文件导入表格数据
        reconciliationList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,

        excelUploadUrl: process.env.VUE_APP_BASE_API + '/fund/reconciliation/upload',
        myHeaders: {Authorization: 'Bearer ' + getToken()},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          fileName: undefined,
          prov: undefined,
          accNo: undefined,
          cur: undefined,
          transDate: undefined,
          transTime: undefined,
          logId: undefined,
          transType: undefined,
          bankNo: undefined,
          accName: undefined,
          flag: undefined,
          crProv: undefined,
          crAccNo: undefined,
          crCur: undefined,
          crAccName: undefined,
          crBankName: undefined,
          transFlag: undefined,
          errorDate: undefined,
          errorSummonsNo: undefined,
          transAmt: undefined,
          balance: undefined,
          preBalance: undefined,
          feeTotal: undefined,
          voucherType: undefined,
          voucherProv: undefined,
          voucherBatchId: undefined,
          voucherNo: undefined,
          cusRefNum: undefined,
          transId: undefined,
          tellerNo: undefined,
          summonsNo: undefined,
          abstract: undefined,
          postScript: undefined,
          transOrg: undefined,
          corpCode: undefined,
          corpName: undefined,
          reqIp: undefined,
          status: undefined,
          remarks: undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          fileName: [
            {required: true, message: "对账文件名称不能为空", trigger: "blur"}
          ], prov: [
            {required: true, message: "省市代码不能为空", trigger: "blur"}
          ], accNo: [
            {required: true, message: "账号不能为空", trigger: "blur"}
          ], cur: [
            {required: true, message: "货币码不能为空", trigger: "blur"}
          ], transDate: [
            {required: true, message: "交易日期不能为空", trigger: "blur"}
          ], transTime: [
            {required: true, message: "交易时间不能为空", trigger: "blur"}
          ], logId: [
            {required: true, message: "日志号不能为空", trigger: "blur"}
          ], transType: [
            {required: true, message: "交易类型不能为空", trigger: "blur"}
          ], bankNo: [
            {required: true, message: "交易行号不能为空", trigger: "blur"}
          ], accName: [
            {required: true, message: "户名不能为空", trigger: "blur"}
          ], flag: [
            {required: true, message: "发生额标志不能为空", trigger: "blur"}
          ],
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询对账文件导入列表 */
      getList() {
        this.loading = true;
        listReconciliation(this.queryParams).then(response => {
          this.reconciliationList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          fileName: undefined,
          prov: undefined,
          accNo: undefined,
          cur: undefined,
          transDate: undefined,
          transTime: undefined,
          logId: undefined,
          transType: undefined,
          bankNo: undefined,
          accName: undefined,
          flag: undefined,
          crProv: undefined,
          crAccNo: undefined,
          crCur: undefined,
          crAccName: undefined,
          crBankName: undefined,
          transFlag: undefined,
          errorDate: undefined,
          errorSummonsNo: undefined,
          transAmt: undefined,
          balance: undefined,
          preBalance: undefined,
          feeTotal: undefined,
          voucherType: undefined,
          voucherProv: undefined,
          voucherBatchId: undefined,
          voucherNo: undefined,
          cusRefNum: undefined,
          transId: undefined,
          tellerNo: undefined,
          summonsNo: undefined,
          abstract: undefined,
          postScript: undefined,
          transOrg: undefined,
          corpCode: undefined,
          corpName: undefined,
          createBy: undefined,
          createDate: undefined,
          reqIp: undefined,
          status: "0",
          updateBy: undefined,
          updateDate: undefined,
          remarks: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加对账文件导入";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getReconciliation(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改对账文件导入";
        });
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateReconciliation(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addReconciliation(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除对账文件导入编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delReconciliation(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      beforeAvatarUpload (file) {
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        const extension = testmsg === 'xls'
        const extension2 = testmsg === 'xlsx'
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!extension && !extension2) {
          this.$message({
            message: '上传文件只能是 xls、xlsx格式!',
            type: 'warning'
          });
        }
        if (!isLt2M) {
          this.$message({
            message: '上传文件大小不能超过 5M!',
            type: 'warning'
          });
        }
        return extension || extension2 && isLt2M
      },
      handleImageBatchUpload(res) {
        if (res.code === 200) {
          this.getList();
          this.msgSuccess("上传成功!");
        } else {
          this.msgError(res.msg);
        }
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出对账文件导入数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return exportReconciliation(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
      }
    }
  };
</script>
